<template>
    <div>
  
      <h3 style="color: rgba(255,255,255,0.4);margin: 10px 250px">【HUnit】</h3>
  
      <!--按钮-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【按钮】</spn><br/><br/>
      <hu-button type="green" value="HUnit" size="mini"/>
      <hu-button type="red" value="HUnit" size="small"/>
      <hu-button type="purple" value="HUnit" size="big"/>
      <hu-button type="orange" value="HUnit" size="max"/>
      <hu-button type="grey" value="HUnit（默认）"/>
      <hu-button type="blue" value="HUnit"/>
  
      <br/><br/><br/>
      <!--文本标签-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【文本标签】</spn><br/><br/>
      <hu-tag type="grey" value="Hello, HUnit"/> <!--默认-->
      <hu-tag type="blue" value="Hello, HUnit"/>
      <hu-tag type="green" value="Hello, HUnit"/>
      <hu-tag type="orange" value="Hello, HUnit"/>
      <hu-tag type="red" value="Hello, HUnit"/>
      <hu-tag type="purple" value="Hello, HUnit"/>
  
      <br/><br/><br/>
      <!--弹出框-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【弹出框】</spn><br/><br/>
      <hu-button @click="dianJi1()" value="成功提示"/>
      <hu-button @click="dianJi2()" value="失败提示"/>
      <hu-button @click="dianJi3()" value="警告提示"/>
      <hu-button @click="dianJi4()" value="通知提示"/>
      <hu-button @click="dianJi5()" value="对话框"/>
      <hu-button @click="dianJi6()" value="确认操作"/>
  
      <!--对话框-->
      <hu-dialog title="对话框"
                 ref="huDialog"
                 @resHuDialog="resultDialog"
                 submit="确认"
                 close="关闭"
                 width="500px"
                 top="15%">
        <hu-input read-only v-model="value1" title="单行文本" placeholder="请输入"/>
        <hu-input-bool read-only v-model="value2" title="布尔选择" :true-key="true" :false-key="false"/>
        <hu-input-count read-only v-model="value3" title="计数器" step="2" />
        <hu-input-password read-only v-model="value4" title="密码框" placeholder="请输入"/>
        <hu-input-interval read-only v-model="valueInterval1" title="区间值" link-symbol="~"/>
        <hu-input-textarea read-only v-model="value5" title="文本域" placeholder="请输入"/>
        <hu-select read-only v-model="value6" :selectDic="selectDic" title="下拉选择" placeholder="请点击选择" search/>
        <hu-tree-select read-only v-model="value7" :data="treeData" title="树形选择" placeholder="请选择" search/>
      </hu-dialog>
  
      <br/><br/>
      <!--单行文本-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【单行文本】</spn><br/>
      <hu-input v-model="value1" title="title" placeholder="请输入"/>
  
      <br/>
      <!--布尔选择-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【布尔选择】</spn><br/>
      <hu-input-bool v-model="value2" title="title" :true-key="true" :false-key="false"/>
  
      <br/>
      <!--计数器-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【计数器】</spn><br/>
      <hu-input-count v-model="value3" title="title" step="2" />
  
      <br/>
      <!--密码框-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【密码框】</spn><br/>
      <hu-input-password v-model="value4" title="title" placeholder="请输入"/>
  
      <br/>
      <!--区间值（默认）-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【区间值（默认）】</spn><br/>
      <hu-input-interval v-model="valueInterval1" title="title"/>
  
      <br/>
      <!--区间值（自定义连接符）-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【区间值（自定义连接符）】</spn><br/>
      <hu-input-interval v-model="valueInterval2" title="title" link-symbol="至"/>
  
      <br/>
      <!--文本域-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【文本域】</spn><br/>
      <hu-input-textarea v-model="value5" title="title" placeholder="请输入"/>
  
      <br/>
      <!--下拉选择（默认）-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【下拉选择（默认）】</spn><br/>
      <hu-select-dict v-model="value6"
                 :selectDic="selectDic"
                 title="title"
                 placeholder="请选择"/>
      <br/>
      <!--下拉选择（搜索）-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【下拉选择（搜索）】</spn><br/>
      <hu-select-dict v-model="value66"
                      :selectDic="selectDic"
                      title="title"
                      placeholder="请选择"
                      search/>
  
      <br/>
      <!--树形选择（默认）-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【树形选择（默认）】</spn><br/>
      <hu-select-tree v-model="value7"
                      :data="treeData"
                      title="title"
                      placeholder="请选择"/>
      <br/>
      <!--树形选择（搜索）-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【树形选择（搜索）】</spn><br/>
      <hu-select-tree v-model="value77"
                      :data="treeData"
                      title="title"
                      placeholder="请选择"
                      search/>
  
      <!--年份选择（默认）-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【年份选择（默认）】</spn>
      <hu-select-year v-model="value8"
                      title="title"
                      placeholder="请选择年份"/>
      <br/>
      <!--年份选择（yyyy年）-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【年份选择（yyyy年）】</spn>
      <hu-select-year v-model="value88"
                      title="title"
                      placeholder="请选择年份"
                      format="yyyy年"/>
  
      <br/>
      <!--月份选择（默认）-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【月份选择（默认）】</spn>
      <hu-select-month v-model="value9"
                       title="title"
                       placeholder="请选择月份"/>
      <br/>
      <!--月份选择（yyyy年MM日）-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【月份选择（yyyy年MM日）】</spn>
      <hu-select-month v-model="value99"
                       title="title"
                       placeholder="请选择月份"
                       format="yyyy年MM月"/>
  
      <br/>
      <!--日期时间选择（默认）-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【日期时间选择（默认）】</spn>
      <hu-select-datetime v-model="value12"
                          title="title"
                          placeholder="请选择日期"/>
      <br/>
      <!--日期时间选择（yyyy年MM月dd日）-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【日期时间选择（yyyy年MM月dd日）】</spn>
      <hu-select-datetime v-model="value13"
                          title="title"
                          placeholder="请选择日期"
                          format="yyyy年MM月dd日"/>
      <br/>
      <!--日期时间选择（yyyy-MM-dd HH:mm:ss）-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【日期时间选择（yyyy-MM-dd HH:mm:ss）】</spn>
      <hu-select-datetime v-model="value10"
                          title="title"
                          placeholder="请选择日期时间"
                          format="yyyy-MM-dd HH:mm:ss"/>
      <br/>
      <!--日期时间选择（yyyy年MM月dd日 HH时mm分ss秒）-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【日期时间选择（yyyy年MM月dd日 HH时mm分ss秒）】</spn>
      <hu-select-datetime v-model="value11"
                          title="title"
                          placeholder="请选择日期时间"
                          format="yyyy年MM月dd日 HH时mm分ss秒"/>
  
      <br/>
      <!--列表-->
      <hu-button @click="checkbox = true" value="多选"/><hu-button @click="checkbox = false" value="单选"/>
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【列表（默认）】 index {{tIndex}}</spn><br/><br/>
      <hu-table v-model="tIndex" :tableInfo="tableInfo" :checkbox="checkbox">
        <hu-button @click="chaKan()" value="查看" size="mini"/>
        <hu-button @click="bianJi()" value="编辑" size="mini"/>
        <hu-button @click="shanChu()" value="删除" size="mini"/>
      </hu-table>
      <hu-dialog title="查看" top="20%"
                 ref="viewBtn" width="450px"
                 @resHuDialog="resultDialog" onlyClose>
          <hu-input 
            v-for="(item,mIndex) in tableInfo.value[tIndex]" :key="mIndex"
            read-only :value="item" :title="tableInfo.title[mIndex]"/>
      </hu-dialog>
      <hu-dialog title="编辑" top="20%"
                 ref="editBtn" width="450px"
                 @resHuDialog="resultDialog">
          <hu-input 
          v-for="(item,mIndex) in tableInfo.value[tIndex]" :key="mIndex"
          :value="item" :title="tableInfo.title[mIndex]" />
      </hu-dialog>
  
      <!--分页-->
      <br/><br/>
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【分页】</spn><br/><br/>
      <hu-page :currentPage=1 :totalPage=33 :pageSize=5 @current-page="onCurrentPage"/>
      <hu-page :currentPage=1 :totalPage=33 :pageSize=5 @current-page="onCurrentPage" type="text"/>
  
      <!--头像-->
      <br/>
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【头像】</spn><br/><br/>
      <span style="display: inline-block;width: 100px;height: 100px">
        <hu-avatar :imgUrl="avatarUrl" title="Hello,HUnit"/>
      </span>
      <span style="display: inline-block;width: 100px;height: 100px">
        <hu-avatar :imgUrl="avatarUrl" type="rectangle" title="Hi,HUnit"/>
      </span>
      <br/>
  
      <br/>
      <!--走马灯-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【走马灯】</spn><br/><br/>
      <div style="width:100%; height: 300px">
        <hu-carousel :imgUrl="imgUrl" :title="title"/>
      </div>
  
      <br/>
      <!--骨架屏-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【骨架屏-mini】</spn><br/>
      <div style="height: 150px;width: 100%;position: relative">
        <hu-skeleton size="mini"/>
      </div>
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【骨架屏-small】</spn><br/>
      <div style="height: 270px;width: 100%;position: relative">
        <hu-skeleton size="small"/>
      </div>
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【骨架屏-big】</spn><br/>
      <div style="height: 480px;width: 100%;position: relative">
        <hu-skeleton size="big"/>
      </div>
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【骨架屏-max】</spn><br/>
      <div style="height: 650px;width: 100%;position: relative">
        <hu-skeleton size="max"/>
      </div>
  
      <br/>
      <!--加载动画-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【加载动画】</spn>
      <div style="width: 100%;height: 50px;">
        <div style="width: 200px;height: 50px; position: relative;float: left">
          <hu-loading type="circular"/> <!--默认-->
        </div>
        <div style="width: 200px;height: 50px;position: relative;float: left">
          <hu-loading type="rectangle"/>
        </div>
        <div style="width: 200px;height: 50px;position: relative;float: left">
          <hu-loading type="circular"/>
        </div>
      </div>
  
      <br/>
      <!--空-->
      <spn style="color: rgba(255,255,255,0.5);font-size: 13px">【空】</spn><br/>
      <div style="height: 100px;width: 100%;position: relative">
        <hu-empty/>
      </div>
  
      <!--回到顶部-->
      <!-- <hu-back-top/>
      <hu-back-top type="circular" bottom="120px"/> -->
    </div>
  </template>
  
  <script>
      export default {
          name: "00.测试",
          data() {
              return {
                  // 单行文本
                  value1: "Hello, HUnit",
  
                  value2: 1,
  
                  value3: 10,
  
                  value4: "Hello, HUnit",
  
                  value5: "Hello, HUnit",
                  imgUrl:[
                      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202008%2F01%2F20200801192726_t4FvV.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669798885&t=8f1c8e612a79b21ab4377fb300a30184",
                      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202008%2F01%2F20200801192726_t4FvV.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669798885&t=8f1c8e612a79b21ab4377fb300a30184",
                      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202008%2F01%2F20200801192726_t4FvV.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669798885&t=8f1c8e612a79b21ab4377fb300a30184",
                      "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202008%2F01%2F20200801192726_t4FvV.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669798885&t=8f1c8e612a79b21ab4377fb300a30184",
                  ],
                  // title:["标题01","标题02","标题03","标题04","标题05"],
  
                  value66: "002",
                  value6: "003",
                  selectDic:[
                      {
                          "value": "001",
                          "label": "Hello,HUnit"
                      }, {
                          "value": "002",
                          "label": "Hi,HUnit",
                          "disable": 1,
                      }, {
                          "value": "003",
                          "label": "Good-morning,HUnit"
                      }, {
                          "value": "004",
                          "label": "Good-afternoon,HUnit"
                      }, {
                          "value": "005",
                          "label": "Good-evening,HUnit"
                      }
                  ],
  
                  tIndex: [],
                  checkbox: false,
                  tableInfo: {
                      title: ["name","age","gender","hobby"],
                      value: [
                          ["HUnit01","eighteen01","man01","football01"],
                          ["HUnit02","eighteen02","man02","football02"],
                          ["HUnit03","eighteen03","man03","football03"],
                          ["HUnit04","eighteen04","man04","football04"],
                          ["HUnit05","eighteen05","man05","football05"],
                      ]
                  },
  
                  avatarUrl: "https://img2.woyaogexing.com/2022/07/14/84f60540a0b0e616!400x400.jpg",
  
  
                  content: "Hello HUnit. Are you sure? ",
  
                  value77: "005",
                  value7: "007",
                  treeData:[{
                      "value": "001",
                      "label": "One-HUnit",
                      "disable": 1,
                      "children": [{
                          "value": "002",
                          "label": "Two-HUnit",
                          "children": [{
                              "value": "003",
                              "label": "Three-HUnit"
                          }]
                      }, {
                          "value": "004",
                          "label": "Four-HUnit",
                          "disable": 1,
                          "children": [{
                              "value": "005",
                              "label": "Five-HUnit"
                          }]
                      }]
                  },{
                      "value": "006",
                      "label": "Six-HUnit",
                      "children": [{
                          "value": "007",
                          "label": "Serve-HUnit",
                          "children": [{
                              "value": "008",
                              "label": "Eight-HUnit",
                              "children": [{
                                  "value": "009",
                                  "label": "Nine-HUnit"
                              }]
                          }]
                      }]
                  },{
                      "value": "010",
                      "label": "Ten-HUnit",
                  }],
  
                  value88: "2022年",
                  value8: "2022",
  
                  value9: "2022-10",
                  value99: "2022年10月",
  
                  value10: "2022-10-07 12:22:52",
                  value11: "2022年10月07日 12时22分52秒",
                  value12: "2022-10-07",
                  value13: "2022年10月07日",
  
                  valueInterval1: "172~175",
                  valueInterval2: "172至175",
              }
          },
          methods: {
              dianJi1() {
                  this.$huTip({type:"success", value:"操作成功"})
              },
              dianJi2() {
                  this.$huTip({type:"error", value:"操作失败"})
              },
              dianJi3() {
                  this.$huTip({type:"warning", value:"操作警告"})
              },
              dianJi4() {
                  this.$huTip({type:"info", value:"操作提示"})
              },
  
              dianJi5() {
                  this.$refs.huDialog.openDialog()
              },
              dianJi6() {
                  this.$huConfirm({
                      onConfirm:() => {
                          this.$huTip({value:"您已确认"})
                      },
                      onCancel:() => {
                          this.$huTip({value:"您已取消"})
                      },
                  })
              },
  
              chaKan() {
                  this.$refs.viewBtn.openDialog()
              },
              bianJi() {
                  this.$refs.editBtn.openDialog()
              },
              shanChu() {
                  this.$huConfirm({
                      title: "确认删除",
                      content: `删除${this.tIndex}后不可恢复, 是否继续？`,
                      onConfirm:() => {
                          this.$huTip({value:"您已确认"})
                      },
                      onCancel:() => {
                          this.$huTip({value:"您已取消"})
                      },
                  })
              },
  
              resultDialog(val) {
                  if (val) {
                      this.$huTip({value:"您已确认"})
                  } else {
                      this.$huTip({value:"您已取消"})
                  }
              },
  
              onCurrentPage(page) {
                  this.$huTip_warning("第"+page+"页")
              }
          }
      }
  </script>
  
  <style scoped>
  
  </style>
  